<template>
  <li
    v-if="slots.default"
    class="layui-nav-item"
    :class="[openKeys.includes(id) && isTree ? 'layui-nav-itemed' : '']"
  >
    <a href="javascript:void(0)" @click="openHandle">
      {{ title }}
      <i class="layui-icon layui-icon-down layui-nav-more"></i>
    </a>
    <dl
      class="layui-nav-child"
      :class="[
        openKeys.includes(id) && !isTree ? 'layui-show' : '',
        !isTree ? 'layui-anim layui-anim-upbit' : '',
      ]"
    >
      <slot></slot>
    </dl>
  </li>

  <li
    v-else
    class="layui-nav-item"
    :class="[selectedKey === id ? 'layui-this' : '']"
    @click="selectHandle()"
  >
    <slot v-if="slots.title" name="title"></slot>
    <a v-else href="javascript:void(0)">
      {{ title }}
    </a>
  </li>
</template>

<script setup name="LayMenuItem" lang="ts">
import { defineProps, inject, Ref, ref, useSlots } from "vue";
const slots = useSlots();

const props = defineProps<{
  id: string;
  title: string;
}>();

const isTree = inject("isTree");
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;

const openHandle = function () {
  if (openKeys.value.includes(props.id)) {
    openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
  } else {
    openKeys.value.push(props.id);
  }
};

const selectHandle = function () {
  selectedKey.value = props.id;
};
</script>
